<template>
    <div class="more-wrap">
        <Header></Header>
        <div class="dutySearch">
            部门: <input id="deptName" value="" placeholder="" style="width: 260px;height: 30px"/>&nbsp&nbsp
            姓名: <input id="userName" placeholder="" style="width: 260px;height: 30px"/>&nbsp&nbsp
            联系方式: <input id="userPhone" placeholder="" style="width: 260px;height: 30px"/>&nbsp&nbsp
            <Button icon="ios-search" @click="getData()">搜索</Button>
        </div>


        <div class="card-warp">
            <Card dis-hover :style="{minHeight: '500px', width:'80%'}">
                <Table stripe :columns="columns1" :data="data1">
                    <Spin size="large" fix v-if="loading"></Spin>
                </Table>
                <div class="pager">
                    <Page :total="total" :page-size="pageSize" @on-change="pageChange"/>
                </div>
            </Card>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from '../components/header';
    import Footer from '../components/footer';

    export default {
        name: "maillist",
        components: {
            Header,
            Footer
        },
        mounted() {

            this.getData();
        },
        watch: {
            '$router': 'getParams'
        },
        methods: {

            getQueryVariable(name) {
                const after = window.location.hash.split('?', 2)[1]
                if (after) {
                    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
                    const r = after.match(reg)
                    if (r != null) {
                        return decodeURIComponent(r[2])
                    } else {
                        return false
                    }
                }
            },
            pageChange(page) {
                this.getData(page);
            },
            getData(page) {
                if (!page) {
                    page = 1;
                }

                var deptName = document.getElementById('deptName').value;
                var userName = document.getElementById('userName').value;
                var userPhone = document.getElementById('userPhone').value;

                let _this = this;
                this.loading = true;
                this.pageSize = 10;
                this.$http({
                    method: 'get',
                    url: '/hm/api?m=getMailListInfoBy&userName=' + userName
                        + '&dept=' + deptName +
                        '&userPhone=' + userPhone + '&page=' + page + '&pageSize=' + this.pageSize
                }).then(function (res) {
                    console.log(res.data)
                    _this.data1 = res.data.mailListInfos;
                    _this.total = res.data.total;
                    _this.pageSize = res.data.pageSize;
                    _this.loading = false;
                }).catch(function (err) {
                    _this.loading = false;
                    console.log(err);
                })
            }
        },
        data() {
            return {
                total: 0,
                pageSize: 0,
                loading: false,
                columns1: [
                    {
                        title: '部门',
                        key: 'dept'
                    },
                    {
                        title: '姓名',
                        key: 'userName'
                    },
                    {
                        title: '联系方式',
                        key: 'userPhone'
                    },
                    {
                        title: '人员角色',
                        key: 'userRole'
                    }
                ],
                data1: [
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    },
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    },
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    },
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    },
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    },
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    },
                    {
                        dept: '警支大队',
                        userName: '张三',
                        userPhone: '18647376618',
                        userRole: '民警'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .more-wrap {
        min-width: 1200px;

    }

    .card-warp {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 0;
    }

    .dutySearch {
        width: 100%;
        align-items: center;
        /*margin: 15px 0;*/
        margin-left: 350px;
        margin-top: 15px;
    }

    .pager {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 10px;
    }

    input {
        width: 145px;
    }
</style>